<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类型模板管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../plugins/select2/select2.css" />
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function () {
			getTypeTemplate();
		})
		function getTypeTemplate() {
			//获取模糊查询
			var name = $("#probably").val();
			$.ajax({
				url: "/typeTemplate/getTypeTemplate",
				data:{name:name},
				type: "post",
				async: false,//同步
				dataType: "json",
				success: function (result) {
					var typeTemplateList = result.data;
					var	table = '';
					$.each(typeTemplateList,function (i,v) {
						table += '<tr><td><input name="box" value="'+ v.id +'" type="checkbox"></td><td>'+ v.id +'</td><td>'+ v.name +'</td>';
						//关联品牌
						var brandIds = v.brandIds;
						//将字符串转换成对象
						var brand = JSON.parse(brandIds);
						/*console.log(brand);*/
						table +='<td>';
						var brandId="";
						for (var a=0; a < brand.length; a++){
							brandId +=(brand[a].text+",");
						}
						table +=brandId.substring(0,brandId.length-1);
						table +='</td>';
						//管理规格
						var specIds= v.specIds;
						//将字符串转换成对象
						var spec=JSON.parse(specIds);
						/*console.log(spec);*/
						table +='<td>';
						var specId="";
						for (var b=0; b < spec.length; b++){
							specId +=(spec[b].text+",");
						}
						table +=specId.substring(0,specId.length-1);
						table +='</td>';

						//扩展属性
						var customAttributeItems= v.customAttributeItems;
						//将字符串转换成对象
						var cai=JSON.parse(customAttributeItems);
						/*console.log(cai)*/
						table +='<td>';
						var customAttributeItem="";
						for (var c=0; c < cai.length; c++){
							customAttributeItem +=(cai[c].text+",");
						}
						table +=customAttributeItem.substring(0,customAttributeItem.length-1);
						table +='</td>';

						table +='<td class="text-center">';
						table +='<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" ' +
								'data-target="#editModal" onclick="toUpdate('+ v.id +')">修改</button>';
						table +='</td></tr>';

					})
					$("#typeTemplateTable").html(table);
				},
				error: function () {
					alert.error("系统错误，请联系管理员！");0
				}
			})
		}

		//增加扩展属性
		function addRow() {
			var tr = '<tr><td><input type="checkbox" class="icheckbox_square-blue" ></td>';
			tr +='<td><input class="form-control" name="customAttributeItems" placeholder="属性名称" name="customAttributeItems"></td>';
			tr +='<td><button type="button" class="btn btn-default" title="删除" onclick="deleteRow(this)">';
			tr +='<i class="fa fa-trash-o"></i> 删除</button></td></tr>';
			$("#addRow").append(tr);
		}
		function deleteRow(obj) {
			$(obj).parent().parent().remove();
		}
		//添加select2效果
		$(function () {
			$("#brands").select2();
			$("#specifications").select2();
		})
		//增加
		function addTypeTemplate() {

			//获取商品类型
			var name = $("#name").val();
			//获取关联品牌
			var brands = $("#brands").select2('data');
			var brandList = [];
			$(brands).each(function (index,e) {
				var brand = {id:e.id,text:e.text};
				brandList.push(brand);
			})
			/*console.log(brandList);*/
			//将对象转换成字符串
			var brandIds=JSON.stringify(brandList);
			/*console.log(brandIds);*/

			//获取关联规格
			var specifications=$("#specifications").select2('data');
			var specificationList = [];
			$(specifications).each(function (index,e) {
				var specification = {id:e.id,text:e.text};
				specificationList.push(specification);
			})
			/*console.log(specifications);*/
			//将对象转换成字符串
			var specIds=JSON.stringify(specificationList);
			/*console.log(specIds);*/

			//获取增加扩展属性
			var trs=$("#addRow").find("tr");
			var customAttr=[];
			for (var i=0; i < trs.length; i++){
				var tds=$(trs[i]).find("td");
				var value=$(tds[1]).find("input").val();
				var custom={text:value};
				customAttr.push(custom);
			}
			/*console.log(customAttr);*/
			var customAttributeItems=JSON.stringify(customAttr);
			/*console.log(customAttributeItems);*/
			$.ajax({
				url: "/typeTemplate/addTypeTemplate",
				type: "post",
				dataType: "json",
				data: {name: name, brandIds: brandIds, specIds: specIds, customAttributeItems: customAttributeItems},
				async: false,
				success: function (result) {
					alert(result.message);
					window.location.reload();
					return 1;
				},
				error: function (result) {
					alert(result.message)
				}
			})
		}
		//回显
		function toUpdate(id) {
			$.ajax({
				url:"/typeTemplate/toUpdate",
				type:"post",
				data:{id:id},
				dataType:"json",
				async:true,
				success:function(result){
					if(result.code == 200){
						var data=result.data;

						//回显id 和 name
						var id = data.id;
						$("#id").prop("value",id);
						var name = data.name;
						$("#name").prop("value",name);

						//回显关联品牌
						var brandIds = data.brandIds;
						//将字符串转换成对象
						var brands = JSON.parse(brandIds);
						$(brands).each(function (index, e) {
							$('#brands').append(new Option(e.text, e.id, false, true));
						});
						$('#brands').trigger("change");

						//回关联规格
						var specIds=data.specIds;
						//将字符串转换成对象
						var specs = JSON.parse(specIds);
						$(specs).each(function (index, e) {
							$('#specifications').append(new Option(e.text, e.id, false, true));
						});
						$('#specifications').trigger("change");

						//回显扩展属性
						var customAttributeItems=data.customAttributeItems;
						var custom=JSON.parse(customAttributeItems);
						var tr = "";
						$(custom).each(function (index,e) {
							tr +='<tr><td><input type="checkbox" class="icheckbox_square-blue" ></td>';
							tr +='<td><input class="form-control" placeholder="属性名称" value="'+ e.text +'"></td>';
							tr +='<td><button type="button" class="btn btn-default" title="删除" onclick="deleteRow(this)"">';
							tr +='<i class="fa fa-trash-o"></i> 删除</button></td></tr>';
						})
						$("#addRow").append(tr);

					}else{
						alert(result.message)
					}
				},
				error:function(data){
					alert("系统错误，请联系管理员！");
				}
			})
		}

		//修改操作
		function updateTypeTemplate() {
			//获取商品类型的id
			var id = $("#id").val();
			//获取商品类型
			var name = $("#name").val();
			//获取关联品牌
			var brands = $("#brands").select2('data');
			var brandList = [];
			$(brands).each(function (index,e) {
				var brand = {id:e.id,text:e.text};
				brandList.push(brand);
			})
			/*console.log(brandList);*/
			//将对象转换成字符串
			var brandIds=JSON.stringify(brandList);
			/*console.log(brandIds);*/

			//获取关联规格
			var specifications=$("#specifications").select2('data');
			var specificationList = [];
			$(specifications).each(function (index,e) {
				var specification = {id:e.id,text:e.text};
				specificationList.push(specification);
			})
			/*console.log(specifications);*/
			//将对象转换成字符串
			var specIds=JSON.stringify(specificationList);
			/*console.log(specIds);*/

			//获取增加扩展属性
			var trs=$("#addRow").find("tr");
			var customAttr=[];
			for (var i=0; i < trs.length; i++){
				var tds=$(trs[i]).find("td");
				var value=$(tds[1]).find("input").val();
				var custom={text:value};
				customAttr.push(custom);
			}
			/*console.log(customAttr);*/
			var customAttributeItems=JSON.stringify(customAttr);
			/*console.log(customAttributeItems);*/
			$.ajax({
				url: "/typeTemplate/updateTypeTemplate",
				type: "post",
				dataType: "json",
				data: {id: id,name: name, brandIds: brandIds, specIds: specIds, customAttributeItems: customAttributeItems},
				async: false,
				success: function (result) {
					alert(result.message);
					window.location.reload();
					return 1;
				},
				error: function (result) {
					alert(result.message)
				}
			})
		}

		//判断保存的是添加还是修改
		function addOrUpdate() {
			var id = $("#id").val();

			if ( id == undefined || id == '') {
				addTypeTemplate();
			} else {
				updateTypeTemplate();
			}
		}

		/* 删除数据 */
		function deleteById() {

			var boxs = $("input[name=box]:checked");

			var ids = [];
			$(boxs).each(function (i,e) {
				alert($(e).val());
				ids.push($(e).val());
			})
			if (ids.length<=0){
				alert("请选择删除的行");
			}
			if (confirm("确定删除id为"+ ids +"的行？")) {

				$.ajax({
					url:"/typeTemplate/deleteTypeTemplateByIds",
					data:{ids:ids},
					type:"post",
					dataType:"json",
					async:true,
					success:function(result){
						if (result.code == 200) {
							window.location.reload();
							toastr.success(result.message);
						}
					},
					error:function(){
						alert("删除失败");
					}
				})
			}
		}
	</script>

</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->
                
                    <div class="box-header with-border">
                        <h3 class="box-title">商品类型模板管理</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" onclick="deleteById()" title="删除"><i class="fa fa-trash-o"></i> 删除</button>
                                       
                                        <button type="button" class="btn btn-default" title="刷新" onclick="getTypeTemplate()"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
							                  分类模板名称：<input type="text" th:id="probably">
									<button class="btn btn-default" onclick="getTypeTemplate()">查询</button>
                                </div>
                            </div>
                            <!--工具栏/-->

			                  <!--数据列表-->
							<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
								<thead>
								<tr>
									<th class="" style="padding-right:0px">
										<input id="selall" type="checkbox" class="icheckbox_square-blue">
									</th>
									<th class="sorting_asc">模板ID</th>
									<th class="sorting">分类模板名称</th>
									<th class="sorting">关联品牌</th>
									<th class="sorting">关联规格</th>
									<th class="sorting">扩展属性</th>
									<th class="text-center">操作</th>
								</tr>
								</thead>
<!---------------------------------------------查询出的数据------------------------------------------------------------>
								<tbody th:id="typeTemplateTable"></tbody>
							</table>

                        </div>
                        <!-- 数据表格 /-->

                     </div>
                    <!-- /.box-body -->
                    
	           
					    
                                
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">商品类型模板编辑</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped" th:id="extendTable"  width="800px">
		      	<tr>
		      		<td>商品类型</td>
					<input type="hidden" th:id="id">
		      		<td><input  class="form-control" th:id="name" placeholder="商品类型"></td>
		      	</tr>			   
		      	<tr>
		      		<td>关联品牌</td>
		      		<td>
						<select id="brands" name="brands" style="width: 80%" multiple>
							<option th:each="b : ${brandList}" th:value="${b.id}">[[${b.name}]]</option>
						</select>
		      		</td>
		      	</tr>
		      	<tr>
		      		<td>关联规格</td>
		      		<td>
						<select id="specifications" name="specifications" style="width: 80%" multiple>
							<option th:each="s : ${specificationList}" th:value="${s.id}">[[${s.specName}]]</option>
						</select>
		      		</td>
		      	</tr>	
		      	
		      	<tr>
		      		<td>扩展属性</td>
		      		<td>
		      			<div class="btn-group">
                             <button type="button" class="btn btn-default" onclick="addRow()" title="新增扩展属性"><i class="fa fa-file-o"></i> 新增扩展属性</button>
                                                                    
                        </div>
						<table class="table table-bordered table-striped"  width="800px">
							<thead>
								<tr>
								    <td><input type="checkbox" class="icheckbox_square-blue"></td>
									<td>属性名称</td>									
									<td>操作</td>
								</tr>
							</thead>
							<tbody th:id="addRow">
								<!--<tr>
									<td><input type="checkbox" class="icheckbox_square-blue" ></td>
									<td><input class="form-control" name="customAttributeItems" placeholder="属性名称" ></td>
									<td><button type="button" class="btn btn-default" onclick="deleteRow(this)" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>
								</tr>-->
							</tbody>
						</table>	
           
		      		</td>
		      	</tr>	
		      	      
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" data-dismiss="modal" onclick="addOrUpdate()" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
    
</body>

</html>